import{useDispatch} from 'react-redux'
import{messageadd}from './redux/messageslice'
import { Cascader ,Card,Radio,Button} from 'antd';
import type { RadioChangeEvent } from 'antd';
import{useState}from 'react'
import{nanoid}from '@reduxjs/toolkit'
import { useSelector } from 'react-redux';
 import {http}  from'./utils/index'
import Getmessage from'./component/getmessage'
import './App.css';

function App():any {
  const sendmessage = async () => {
    await http.post('http://localhost:3001/users',{name:name,gender:gender,doctor:doctor})}
  // const test=async()=>{
  //   const src= await http.get('http://localhost:3001')
  //     console.log(src)
  // }
  const[doctor,setdoctor]=useState<String|any>('aa')
  const[gender,setgender]=useState<String|any>('gender')
  const[name,setname]=useState('bb')
  const dispatch=useDispatch()

  const message =useSelector<any>(state=>state.message) as object

  const patient={
    name:name,
    gender:gender,
    doctor:doctor,
    
  }
  interface Doctor {
  value: string | number;
  label: string;
  children?: Doctor[];
}
const doctors: Doctor[] = [
  {
    value: '华佗',
    label: '华佗',
   
  },
  {
    value: '扁鹊',
    label: '扁鹊',
   
  },]
  const Genders = ['男','女'];
  const genderChange = ({ target: { value } }: RadioChangeEvent) => {
    setgender(value);
  };
  const onsaveclicked=()=>{
    if(name){
      dispatch(
       messageadd(
          {
            name:name,
            gender:gender,
            doctor:doctor,
          }
        )
      )
    }
  }
 
  return (
    
  <div>
    <Card>
   姓名：<input onChange={(e)=>{setname(e.target.value)}}/>
    <br/>
    <br/>
   性别： <Radio.Group options={Genders} onChange={genderChange} value={gender} />
   <br/>
    <br/>
  主治医师：<Cascader options={doctors} onChange={(value) => {
  setdoctor(value[0])}} placeholder="Please select" />
     <br/>
     {/* <Button onClick={onsaveclicked}>上传状态</Button>  */}
     <br/>
     <Button onClick={sendmessage}>提交</Button> 
    </Card>
    <Card>
   < Getmessage/>
    </Card>
  <> 
  {console.log(patient)}
  {console.log(message[0])}
  </>
   </div>
   
  );
}

export default App;


